<template>
  <div class="WriteLetter">
    <textarea class="textarea" rows="20" v-model="formInfo.message" placeholder="写点东西吧..."></textarea>
    <van-uploader class="uploader" v-model="formInfo.fileList" preview-size="60" />
    <van-button class="submit-btn" plain type="primary" block @click="submit()">点击提交</van-button>
  </div>
</template>

<script lang="ts" setup>
import { PropType, onMounted, reactive } from 'vue';
import { showNotify } from 'vant';
import 'vant/es/notify/index.css'

const props = defineProps({
  type: {
    type: String as PropType<'xyq' | 'cyc'>,
    required: true,
  },
});

const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'submit'): void
}>();

const formInfo = reactive({
  message: '',
  fileList: [] as Array<{file: File}>,
})

async function submit() {
  const formData = new FormData();
  formData.append('message', formInfo.message);
  formInfo.fileList.forEach(fileInfo => {
    formData.append('files', fileInfo.file);
  })

  fetch(`/nest/upload/writeletter-${props.type}`, {
    method: 'POST',
    body: formData,
  })
  .then(response => {
    console.log('response', response)
    return response.json();
  })
  .then(data => {
      showNotify({ type: 'primary', message: '留言成功', duration: 1500 });
      // 提交成功后
      formInfo.message = '';
      formInfo.fileList = [];
  })
}

onMounted(()=>{

})

defineExpose({
  
})
</script>

<style lang="scss" scoped>
.WriteLetter {
  padding: 14px;
  height: 100%;
  .textarea {
    border: 1px solid rgb(190, 190, 190);
    border-radius: 3px;
    width: 100%;
    height: 40vh;
    padding: 4px;
  }
  .uploader {
    margin: 10px 0;
  }
  .submit-btn {

  }
}
</style>
